<!--
 * @Author: lizijian
 * @Date: 2024-03-19 10:36:00
 * @LastEditTime: 2024-03-23 09:29:59
 * @FilePath: \client\src\pages\order\components\companyInput.vue
 * @Description: 企业选择组件
-->
<template>
	<ypinput
		v-model="companyName"
		placeholder="请选择所属企业"
		readonly
		@click="VisibleDialog = true"
	></ypinput>
	<ypdialog
		width="800"
		title="请选择企业"
		:mask="1"
		v-if="VisibleDialog"
		@close="VisibleDialog = false"
	>
		<div class="grid grid-cols-2 text-sm my-2 space-x-2">
			<div class="flex basis-1/4 grow items-center">
				<div class="w-24 text-right pr-5">企业名称</div>
				<div class="flex-1">
					<ypinput
						v-model="queryParams.name"
						placeholder="请输入企业名称"
					></ypinput>
				</div>
			</div>
			<div>
				<button class="btn btn-lan" @click="getDataList">查询</button>
			</div>
		</div>
		<table class="yp-table-datalist">
			<thead>
				<tr>
					<th>企业名称</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in dataList" :key="index">
					<td>{{ item.name }}</td>
					<td>
						<button class="btn btn-chen" @click="handleSelect(item)">
							选择
						</button>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="mt-3" v-if="pageData.pageCount > 1">
			<yppage @topage="topage" :pageData="pageData" />
		</div>
	</ypdialog>
</template>
<script setup>
	import { ref, reactive, onMounted, watch } from 'vue'
	import { getData } from '@/common/base'
	const props = defineProps({
		modelValue: {},
		companyName: {
			default: '',
		},
	})
	const dataList = reactive([])
	//分页
	const limit = ref(5)
	const pageData = reactive({
		totalRecords: 0, //总记录数
		pageCount: 0, //总页数
		currentPage: 1, //当前页
	})
	const emits = defineEmits(['update:modelValue', 'update:companyName'])
	const companyName = ref(props.companyName)
	watch(
		() => props.modelValue,
		(newVal) => {
			if (!newVal) companyName.value = ''
		}
	)
	const VisibleDialog = ref(false)
	const queryParams = reactive({})
	const handleSelect = (item) => {
		emits('update:modelValue', item.id)
		emits('update:companyName', item.name)
		companyName.value = item.name
		VisibleDialog.value = false
	}
	// 获取企业数据
	const getDataList = async () => {
		const query = []
		Object.keys(queryParams).forEach((col) => {
			query.push({ col, value: queryParams[col] })
		})
		const res = await getData('company/index', {
			query,
			page: pageData.currentPage,
			limit: limit.value,
		})
		const { data, last_page, total } = res.data
		pageData.totalRecords = total
		pageData.pageCount = last_page
		dataList.length = 0
		data.map((item) => {
			dataList.push(item)
		})
	}
	const topage = (page) => {
		pageData.currentPage = page
		getDataList()
	}
	onMounted(() => {
		getDataList()
	})
</script>
